<template>
  <div>
  <el-container>
    <el-header><div style="border: 1px;">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">

        <el-menu-item index="1" ><img style="margin-left: 20px ;width: 150px;height: 50px" src="http://qpt0e0e6g.hb-bkt.clouddn.com/login.png"></el-menu-item>
        <el-menu-item index="2" style="margin-left: 10px;font-size: 18px" @click="toindex">首页</el-menu-item>
        <el-menu-item index="3" style="margin-left: 10px;font-size: 18px">榜单</el-menu-item>
        <el-menu-item index="4"  style="margin-left: 10px;font-size: 18px">COS</el-menu-item>
        <el-menu-item index="5"  style="margin-left: 10px;font-size: 18px"><router-link to="/redios">视频</router-link></el-menu-item>
        <el-menu-item index="6"  style="margin-left: 10px;font-size: 18px">问答</el-menu-item>
        <el-menu-item index="7">
          <el-input  style="width: 200px ;"
                     placeholder="搜索COS、视频、用户..."
                     v-model="input"
                     clearable >
          </el-input>  <el-button @click="sousuo" style="height: 39px;" con="el-icon-search">搜索</el-button>
        </el-menu-item>
        <el-menu-item index="8"  style="margin-left: 65px;font-size: 18px" @click="tologin">登录</el-menu-item>
        <el-menu-item index="9"  style="margin-left: 5px;font-size: 18px" @click="toregist">注册</el-menu-item>
        <el-dropdown index="10" style="margin-left: 10px ;" >
          <el-button style="background-color: #ff6fa2;width: 100px;height: 50px;">
            <i class="el-icon-finished el-icon--right"style="font-size: 20px;align-content: center;color: aliceblue">发布</i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-circle-plus">图片</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus"><router-link to="/mvUpload">视频</router-link></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </el-menu>
    </div>
    </el-header>
    <el-main style="background-image:url('http://qpt0e0e6g.hb-bkt.clouddn.com/1.gif')">
      <div style="border:2px;align-content: center;margin-top: 60px;margin-left: 360px;width: 500px">
      <el-form ref="form" :model="form" label-width="80px">
        <span style="font-size: 30px;">欢迎来到半次元</span>
        <el-form-item label="用户名" style="margin-top: 20px">
          <el-input  v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" >
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="margin-left:-50px;width:500px;background-color: #ff6fa2" @click="onSubmit">立即登录</el-button>
        </el-form-item>
      </el-form>
    </div>
    </el-main>
  </el-container>

    </div>
</template>

<script>
  import axios from 'axios';
  axios.defaults.withCredentials=true
    export default {
        name: "index",
      data() {
        return {
          form: {
            userName:'',
            password:''
          },
          activeIndex: '1',
          input: ''
        };
      },
      methods: {
        toindex:function(){
          this.$router.push("/")
        },
        tologin:function(){
          this.$router.push("/login")
        }, toregist:function(){
          this.$router.push("/regist")
        },
        onSubmit() {
          axios.post("http://localhost/bcy-user/user/login",this.form).then(res=>{
            if (res.data.code==200){
              this.$router.push("/")
              this.$cookie.set("token",res.data.data)
            }else {
              alert(res.data.message)
            }
          })
        },
          sousuo:function(){
            this.$router.push("/redios")
              // axios.get("http://localhost/bcy-search/search/findAll/"+this.input).then(res=>{
              //   if (res.data.code==200){
              //
              //     this.shareList=res.data.data;
              //   }
              // })

        },
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },
      }
    }
</script>

<style scoped>
  .el-main {
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  .el-header, .el-footer {
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
